<template>
  <div>
    <div>
      <el-drawer
        ref="drawer"
        :title="form.id?'编辑活动': '新增活动'"
        :before-close="handleClose"
        :visible.sync="drawer"
        direction="rtl"
        custom-class="demo-drawer"
        size="50%"
        :wrapper-closable="false"
        @open="openlist"
      >
        <hr>
        <div class="demo-drawer__content" style="padding: 0 20px">
          <el-form ref="form" label-position="top" :model="form" :rules="rules">
            <el-row type="flex">
              <el-form-item label="所属小区" prop="community_code">
                <el-select
                  v-model="form.community_code"
                  placeholder="请输入"
                  style="width: 350px"
                >
                  <el-option
                    v-for="item in imgList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="启用状态" style="width: 350px;margin-left: 30px">
                <el-col>
                  <el-radio v-model="form.type" :label="1">关闭</el-radio>
                  <el-radio v-model="form.type" :label="2">启用</el-radio>
                </el-col>
              </el-form-item>
            </el-row>

            <el-row type="flex">
              <el-form-item label="标题" style="width: 350px" prop="title">
                <el-input v-model="form.title" autocomplete="off" />
              </el-form-item>
              <el-form-item
                label="排序大小"
                style="width: 350px; margin-left: 30px"
                prop="sort"
              >
                <el-input-number v-model="form.sort" controls-position="right" @change="handleChange" />
              </el-form-item>
            </el-row>

            <el-row type="flex">
              <el-form-item label="类型" prop="status" style="width: 350px">
                <el-select
                  v-model="form.status"
                  placeholder="请输入"
                  style="width: 350px"
                >
                  <el-option
                    v-for="item in selectHome"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="图片封面" style="width: 350px; margin-left: 30px">
                <ImageUpload ref="imgUrl" />
                <!-- 上传组件 -->
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="活动内容" prop="content" />
              <!-- 富文本框 -->
              <quillEditor v-model="form.content" />
            </el-row>
          </el-form>
        </div>
        <hr>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </el-drawer>
    </div>
    <uploadImg />
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { coummityAPI, AddlistAPI, putlistAPI, noticeputAPI } from '@/api/notice'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        community_code: '',
        content: '',
        title: '',
        status: '',
        type: '',
        sort: 10,
        pic_url: ''
      },
      id: '',
      rules: {
        community_code: [
          { required: true, message: '请选择小区', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请填写活动地点', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写举办单位', trigger: 'blur' }
        ]
      },
      imgList: [],
      selectHome: [{ id: 1, name: '公告' }, { id: 2, name: '通知' }]
    }
  },

  methods: {
    /**
     * 计数器
     */
    handleChange(value) {
      this.form.sort = value
    },
    /**
     * 关闭抽屉
     */
    handleClose() {
      this.$emit('update:drawer', false)
      this.$refs.form.resetFields()
      this.form = {
        community_code: '',
        content: '',
        title: '',
        status: '',
        type: '',
        sort: 10,
        pic_url: ''
      }
    },
    // 转换时间
    formatTimeThat(time) {
      return +new Date(time)
    },
    /**
     * 抽屉打开获取数据
     */
    openlist() {
      this.coummitylist()
    },
    /**
     * 抽屉内表单数据
     */
    async coummitylist() {
      const { data: res } = await coummityAPI()
      // console.log(res)
      this.imgList = res
    },
    /**
     *添加与修改
     */
    onSubmit() {
      console.log(this.$refs.imgUrl)
      this.$refs.form.validate(async(flag) => {
        if (!flag) return
        if (this.form.id) {
          this.form.pic_url = this.$refs.imgUrl.fileList[0].realtiveUrl
          await noticeputAPI(this.form)
          this.$message.success('修改成功')
        } else {
          this.form.pic_url = this.$refs.imgUrl.fileList[0].realtiveUrl
          await AddlistAPI(this.form)
          this.$message.success('添加成功')
        }
        this.handleClose()
        this.$parent.advertisinglist()
      })
    },
    /**
     * 表单回显
     */
    async detalist(id) {
      this.id = id
      // console.log(id)
      // this.form.pic_url = this.$refs.imgUrl.fileList[0].url
      const { data: res } = await putlistAPI(id)
      // console.log(res)
      this.form = res
      this.$refs.imgUrl.fileList = [
        {
          url: 'http://124.223.14.236:8881' + res.pic_url,
          realtiveUrl: res.pic_url
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.quillEditor{
  line-height: normal;
}
::v-deep .el-drawer__header {
  // margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .el-form {
  height: 600px;
  overflow: scroll;
  overflow-x:hidden
}
::v-deep .ql-container{
  height: 100px;
}
.demo-drawer__footer{
  float: right;
  margin-right: 30px;
}
</style>
